D5 看YT學 CSS動畫_光圈1

2022 iThome 鐵人賽

DAY 5

自我挑戰組

CSS UI(動畫)相關系列第 5 篇

14th鐵人賽

kypss95120

2022-09-19 20:39:19

490 瀏覽

分享至

這次參考的影片如下:
https://www.youtube.com/watch?v=avo71iW9mI4
HTML

<link href="C1.css" rel="stylesheet" type="text/css">
<body>
	<div class="T1"></div>
	<div class="T1"></div>
</body>

CSS
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	background: #000000;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	display: flex; 
}

.T1{
	position: relative;
	width: 600px;
	height: 600px;
}

.T1:before{   
	content: '';
	position: absolute;
	top: 100px;
	left: 100px;
	right: 100px;
	bottom: 100px;
	border: 20px solid #FFFFFF;
	border-radius: 50%;
	box-shadow:  0 0 50px #FF3838,/*外圈光暈*/
				  inset 0 0 50px #8EB6FF/*內圈光暈*/
	
}

光圈會因為網頁視窗縮放產生形變

今天先這樣，明天見，謝謝